<template>
  <div class="container">
    <!-- 卡片 -->
    <el-card
      class="box-card"
      :body-style="{ padding: '20px', minHeight: '230px' }"
    >
      <!-- 表单 -->
      <MyForm @search="search"></MyForm>
      <!-- 以上表单 -->

      <!-- 提示数据条数 -->
      <ShowNum :num="counts"></ShowNum>
      <!-- 以上为提示数据条数 -->
      <!-- 表格 -->
      <MyTable :tableData="tableData" type="ordinary">
        <template #operation="{ row }">
          <el-button
            type="primary"
            icon="el-icon-view"
            plain
            circle
            size="small"
            @click="changeShow(row.id)"
          ></el-button>
          <el-button
            type="success"
            plain
            icon="el-icon-edit"
            circle
            size="small"
            @click="edit(row.id)"
          ></el-button>
          <el-button
            type="danger"
            plain
            icon="el-icon-delete"
            circle
            size="small"
            @click="del(row.id)"
          ></el-button>
          <el-button
            icon="el-icon-check"
            circle
            size="small"
            type="warning"
            plain
            @click="changeChoice(row.id)"
          ></el-button>
        </template>
      </MyTable>

      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="pagesizes"
        :page-size="pagesize"
        layout="prev, pager,next,sizes,jumper"
        :total="counts"
        :style="{ display: 'flex', justifyContent: 'end' }"
      >
      </el-pagination>
      <!-- 以上为表格 -->
    </el-card>
    <PreView
    :data="data"
      :renderDia="renderDia"
      @close="showDia = flase"
      :options="options"
      ref="preview"
    ></PreView>
  </div>
</template>

<script>
import ShowNum from '@/components/QuestionBank/ShowNum.vue'
import MyForm from '@/components/QuestionBank/MyForm.vue'
import MyTable from '@/components/QuestionBank/MyTable.vue'
import { list, remove, choiceAdd, detail } from '@/api/hmmm/questions.js'
import { parseTime } from '@/utils'
import PreView from '@/module-hmmm/components/questions-preview'
export default {
  data () {
    return {
      data: {},
      page: 1,
      pagesizes: [5, 10, 20, 50],
      pagesize: 5,
      counts: 0,
      tableData: [],
      renderDia: {},
      options: [],
      showDia: false
    }
  },
  components: { ShowNum, MyForm, MyTable, PreView },
  created () {
    this.search()
  },
  methods: {
    // 根据条件发请求
    async getItems (form) {
      const { data } = await list({
        page: this.page,
        pagesize: this.pagesize,
        ...form
      })
      data.items.forEach(item => {
        item.addDate = parseTime(item.addDate)
      })
      this.counts = data.counts
      this.tableData = data.items
    },
    search (data) {
      const form = {}
      for (const key in data) {
        if (data[key]) {
          form[key] = data[key]
        }
      }
      this.page = 1
      this.getItems(form)
    },
    handleSizeChange (value) {
      this.pagesize = value
      this.getItems()
    },
    handleCurrentChange (value) {
      this.page = value
      this.getItems()
    },
    del (id) {
      this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await remove({ id })
          this.getItems()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    changeChoice (id) {
      this.$confirm('此操作将该题目加入精选, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      })
        .then(async () => {
          await choiceAdd({ id, choiceState: 1 })
          this.getItems()
          this.$message({
            type: 'success',
            message: '添加成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消添加'
          })
        })
    },
    async changeShow (id) {
      const { data } = await detail({ id })
      this.data = data
      console.log(data, 'ih')
      data.addDate = parseTime(data.addDate)

      data.options.sort((a, b) => {
        return a.code < b.code ? -1 : 1
      })
      this.options = data.options.filter(item => item.isRight)
      this.options = this.options.map(item => item.id)
      this.renderDia = data
      console.log(this.$refs.preview)
      this.$refs.preview.open()
    },
    edit (id) {
      this.$router.push({ name: 'questions-new', query: { id } })
    }
  }
}
</script>

<style scoped lang="less">
.container {
  margin: 10px;
}
</style>
